<template>
    <div class="data_center">

      <!--引入大屏响应式容器-->
      <dv-full-screen-container>
        <!--全局加载图标-->
        <dv-loading v-if="loading" style="color: white;position: absolute;z-index: 100;left: 50%;transform: translate(-50%,-50%);top: 50%;">Loading...</dv-loading>
        <!--全局加载图标-->
      <div class="box_container">

        <!--标题顶部-->
        <div class="header">
            <div class="exit">
                 <span class="exit_box" @click="Exit">
                    <i class="iconfont icontuichu" style="color: #26d1d4;font-size: 16px"></i>
                    <span class="exit_text">退出</span>
                 </span>
            </div>
            <div class="title">市域社会治理现代化展示平台</div>
            <div class="time">
                <span class="time_box">{{year}}年{{month}}月{{date}}日&emsp;{{week}}&emsp;{{hh}}:{{mm}}:{{ss}}</span>

            </div>
        </div>

        <!--标题顶部-->

        <!--身体部分-->

        <div class="body">

             <!--左部-->
          <div class="left">
            <!--男女比例以及健康状态-->
            <div class="left_one">
                  <div class="left_one_left">
                       <div class="left_one_left_top">
                         <img class="left_one_left_top_dot" src="../../assets/images/datacenter/dot.png" alt="">
                         <span class="left_one_left_top_text">男女比例</span>
                       </div>
                       <div class="left_one_left_bottom">
                            <div class="left_one_left_bottom_left">
                              <img class="man" src="../../assets/images/datacenter/man.png" alt="">
                              <div class="man_data">
                                   <span class="man_sex">男性</span>
                                   <span class="man_num">{{sexs.totalMemberMan}}人</span>
                              </div>
                            </div>
                            <div class="left_one_left_bottom_right">
                              <img class="women" src="../../assets/images/datacenter/women.png" alt="">
                              <div class="women_data">
                                <span class="women_sex">女性</span>
                                <span class="women_num">{{sexs.totalMemberWoman}}人</span>
                              </div>
                            </div>
                       </div>
                  </div>
                  <div class="left_one_right">
                         <div class="left_one_right_top">

                           <img class="left_one_right_top_dot" src="../../assets/images/datacenter/dot.png" alt="">
                           <span class="left_one_right_top_text">健康状态</span>

                         </div>
                         <div class="left_one_right_bottom">
                           <div class="left_one_right_bottom_left">
                             <img class="healthy" src="../../assets/images/datacenter/jiankang.png" alt="">
                             <div class="healthy_data">
                               <span class="healthy_status">良好</span>
                               <span class="healthy_num">{{Healthys.healthyMember}}人</span>
                             </div>

                           </div>
                           <div class="left_one_right_bottom_right">
                             <img class="poor" src="../../assets/images/datacenter/yichang.png" alt="">
                             <div class="poor_data">
                               <span class="poor_status">异常</span>
                               <span class="poor_num">{{Healthys.notHealthyMember}}人</span>
                             </div>

                           </div>
                         </div>

                  </div>
                </div>

            <!--男女比例以及健康状态-->
            <!--事件情况-->
            <div class="left_two">
                 <div class="event_desc">
                       <div class="event_desc_top">
                         <img class="event_desc_top_dot" src="../../assets/images/datacenter/dot.png" alt="">
                         <span class="event_desc_top_text">事件情况</span>
                       </div>
                       <div class="event_desc_bottom">
                         <div class="yes">
                           <span class="status_text">待解决</span>
                           <span class="status_num">{{eventDetail.solvedEvent}}件</span>
                         </div>
                         <div  class="no">
                           <span class="status_text">未解决</span>
                           <span class="status_num">{{eventDetail.processingEvent}}件</span>
                         </div>
                         <div class="dai">
                           <span class="status_text">已解决</span>
                           <span class="status_num">{{eventDetail.solveEvent}}件</span>
                         </div>
                       </div>
                 </div>
            </div>
            <!--事件情况-->


            <!--事件类型-->
            <div class="left_three">
              <div class="event_type">
                   <div class="event_type_top">
                     <div class="event_type_top_left">
                       <img class="event_type_top_dot" src="../../assets/images/datacenter/dot.png" alt="">
                       <span class="event_type_top_text">事件预警</span>
                     </div>
                     <div class="event_type_top_right">

                       <!--<el-select  :popper-append-to-body="false" class="el-select" @change="choicYear(value,warn)" v-model="value" :placeholder="year+'-'+month">-->
                         <!--<el-option-->
                           <!--v-for="item in options"-->
                           <!--:key="item.value"-->
                           <!--:label="item.label"-->
                           <!--:value="item.value">-->
                         <!--</el-option>-->
                       <!--</el-select>-->

                     </div>

                   </div>
                   <div id="warnmap" style="width: 513px;height: 315px;">
                           <EventType :date="selectTime"></EventType>
                   </div>
              </div>

            </div>
            <!--事件类型-->

            <!--事件类型2-->
            <div class="left_four">
              <div class="type_total">
                <div class="type_total_top">
                    <img class="type_total_top_dot" src="../../assets/images/datacenter/dot.png" alt="">
                    <span class="type_total_top_text">事件类型</span>
                </div>
                <div class="type_total_bottom">
                  <dv-scroll-ranking-board :config="configtype" style="width:513px;height:179px;" />

                </div>
              </div>

            </div>


            <!--事件类型2-->




          </div>
             <!--左部-->
             <!--中部-->
          <div class="center">
            <!--村民信息-->
            <div class="center_one">
                 <div class="cunmin">
                     <div class="cunmin_top">
                       <img class="cunmin_dot" src="../../assets/images/datacenter/dot.png" alt="">
                       <span class="cunmin_text">村民信息</span>
                     </div>
                     <div class="cunmin_bottom">
                           <div class="cunmin_message">
                             <img class="home" src="../../assets/images/datacenter/home.png" alt="">
                             <span class="total_text">总户数</span>
                             <span class="total_num">{{cunminMessage.totalHome}}户</span>
                           </div>
                           <div class="cunmin_message">
                             <img class="home" src="../../assets/images/datacenter/home.png" alt="">
                             <span class="total_text">总人数</span>
                             <span class="total_num">{{cunminMessage.totalMember}}人</span>
                           </div>
                           <div class="cunmin_message">
                             <img class="home" src="../../assets/images/datacenter/home.png" alt="">
                             <span class="total_text">党员数</span>
                             <span class="total_num">0人</span>
                           </div>
                     </div>
                 </div>
            </div>
            <!--村民信息-->
            <!--网格地图-->
            <div class="center_two">
              <div id="map">
                  <GirdMap></GirdMap>
              </div>
            </div>
            <!--网格地图-->
            <!--志愿服务情况-->
            <div class="center_three">
              <div class="zhiyuan">
                 <div class="zhiyuan_top">
                      <div class="zhiyuan_top_left">
                        <img class="zhiyuan_top_left_dot" src="../../assets/images/datacenter/dot.png" alt="">
                        <span class="zhiyuan_top_left_text">志愿服务情况</span>
                      </div>
                      <div class="zhiyuan_top_right">
                        <!--<el-select  :popper-append-to-body="false" class="el-select" @change="choicYear(value,key)" v-model="value" :placeholder="year">-->
                        <!--<el-option-->
                        <!--v-for="item in options1"-->
                        <!--:key="item.value1"-->
                        <!--:label="item.label2"-->
                        <!--:value="item.value1">-->
                        <!--</el-option>-->
                        <!--</el-select>-->
                      </div>
                 </div>
                 <div class="zhiyuan_bottom">
                      <Volunteer></Volunteer>
                 </div>
              </div>

            </div>
            <!--志愿服务情况-->



          </div>
             <!--中部-->
             <!--右部-->
          <div class="right">
             <!--红榜-->
            <div class="right_one">
              <div class="red">
                <div class="red_top">
                  <img class="red_dot" src="../../assets/images/datacenter/dot.png" alt="">
                  <span class="red_text">红榜情况</span>
                </div>
                <div class="red_bottom">
                  <dv-scroll-board :config="config" style="width:513px;height:145px" />

                </div>
              </div>

            </div>
             <!--红榜-->
            <!--重点人群-->
            <div class="right_two">
              <div class="key">
                <div class="key_top">
                    <div class="key_top_left">
                        <img class="key_dot" src="../../assets/images/datacenter/dot.png" alt="">
                        <span class="key_text">重点人群</span>

                    </div>
                    <div class="key_top_right">
                      <!--<el-select  :popper-append-to-body="false" class="el-select" @change="choicYear(value,key)" v-model="value" :placeholder="year+'-'+month">-->
                        <!--<el-option-->
                          <!--v-for="item in options"-->
                          <!--:key="item.value"-->
                          <!--:label="item.label"-->
                          <!--:value="item.value">-->
                        <!--</el-option>-->
                      <!--</el-select>-->
                    </div>
                </div>
                <div class="key_bottom">
                    <div class="key_groups" v-for="(item,index) in keyGroups" :key="index">
                       <div class="key_groups_left">
                         <!--<img style="height: 55px;width: 55px;object-fit: cover" src="../../assets/images/datacenter/drug.png" alt="">-->
                         <img style="height: 55px;width: 55px;object-fit: cover" src="../../assets/images/datacenter/keycommon.png" alt="">
                       </div>
                       <div class="key_groups_right">
                              <span class="key_groups_right_top">{{item.tags_name}}</span>
                              <span class="key_groups_right_bottom">{{item.num}}人</span>
                       </div>
                    </div>
                    <!--<div class="key_groups">-->
                            <!--<div class="key_groups_left">-->
                              <!--<img style="height: 55px;width: 55px;object-fit: cover" src="../../assets/images/datacenter/prime.png" alt="">-->
                            <!--</div>-->
                            <!--<div class="key_groups_right">-->
                              <!--<span class="key_groups_right_top">刑满释放</span>-->
                              <!--<span class="key_groups_right_bottom">15人</span>-->
                            <!--</div>-->
                    <!--</div>-->
                    <!--<div class="key_groups">-->
                          <!--<div class="key_groups_left">-->
                            <!--<img style="height: 55px;width: 55px;object-fit: cover" src="../../assets/images/datacenter/correct.png" alt="">-->
                          <!--</div>-->
                          <!--<div class="key_groups_right">-->
                            <!--<span class="key_groups_right_top">社区矫正</span>-->
                            <!--<span class="key_groups_right_bottom">15人</span>-->
                          <!--</div>-->
                   <!--</div>-->
                    <!--<div class="key_groups">-->
                        <!--<div class="key_groups_left">-->
                          <!--<img style="height: 55px;width: 55px;object-fit: cover" src="../../assets/images/datacenter/aids.png" alt="">-->
                        <!--</div>-->
                        <!--<div class="key_groups_right">-->
                          <!--<span class="key_groups_right_top">艾滋病</span>-->
                          <!--<span class="key_groups_right_bottom">15人</span>-->
                        <!--</div>-->
                   <!--</div>-->
                    <!--<div class="key_groups">-->
                        <!--<div class="key_groups_left">-->
                          <!--<img style="height: 55px;width: 55px;object-fit: cover" src="../../assets/images/datacenter/jingshen.png" alt="">-->
                        <!--</div>-->
                        <!--<div class="key_groups_right">-->
                          <!--<span class="key_groups_right_top">精神病</span>-->
                          <!--<span class="key_groups_right_bottom">15人</span>-->
                        <!--</div>-->
                  <!--</div>-->

                </div>
              </div>

            </div>
            <!--重点人群-->

            <!--网格长-->
            <div class="right_three">
                 <div class="grider_higner">
                   <div class="grider_higner_top">
                     <img class="grider_higner_top_dot" src="../../assets/images/datacenter/dot.png" alt="">
                     <span class="grider_higner_top_text">网格长</span>

                   </div>
                   <div class="grider_higner_bottom">

                     <!--<el-carousel class="el-carousel" :interval="3000" type="card" height="100%" indicator-position="none">-->
                       <!--<el-carousel-item class="el-carousel-item" v-for="(item,index) in GirdManager" :key="index">-->
                                 <!--<div class="slider_img">-->
                                   <!--&lt;!&ndash;<img style="height: 100%;width: 100%;object-fit: cover" src="../../assets/images/datacenter/nvshen.png" alt="">&ndash;&gt;-->
                                   <!--<img style="height: 100%;width: 100%;object-fit: cover" :src="item.pic?item.pic:'/static/header.png'" alt="">-->
                                 <!--</div>-->
                                 <!--<div class="slider_name">{{item.name}}</div>-->
                       <!--</el-carousel-item>-->
                     <!--</el-carousel>-->

                     <vue-seamless-scroll :data="GirdManager" :class-option="optionRight" class="seamless-warp2">
                         <span v-for="item1 in 50">
                            <div v-for="item in GirdManager"  class="slider_item">
                                 <div class="item_top">
                                   <!--<img style="height: 100%;width: 100%;object-fit: cover" src="../../assets/images/datacenter/nvshen.png" alt="">-->
                                   <img style="height: 100%;width: 100%;object-fit: cover" :src="item.pic?item.pic:'/static/header.png'" alt="">
                                 </div>
                                 <div class="item_bottom">
                                   {{item.name}}
                                 </div>
                             </div>
                          </span>
                     </vue-seamless-scroll>



                   </div>
                 </div>
            </div>
            <!--网格长-->
            <!--网格员-->
            <div class="right_four">
              <div class="grider_lower">
                   <div class="grider_lower_top">
                     <img class="grider_lower_top_dot" src="../../assets/images/datacenter/dot.png" alt="">
                     <span class="grider_lower_top_text">网格员</span>

                   </div>
                   <div class="grider_lower_bottom">

                     <!--<el-carousel class="el-carousel" :interval="3000" type="card" height="100%" indicator-position="none">-->
                       <!--<el-carousel-item class="el-carousel-item" v-for="item in 6" :key="item">-->
                         <!--<div class="slider_img">-->
                           <!--<img style="height: 100%;width: 100%;object-fit: cover" src="../../assets/images/datacenter/nvshen.png" alt="">-->
                         <!--</div>-->
                         <!--<div class="slider_name">王群</div>-->
                       <!--</el-carousel-item>-->
                     <!--</el-carousel>-->


                     <!--<vue-seamless-scroll :data="newsList" :class-option="optionRight" class="seamless-warp2">-->
                         <!--<span v-for="item1 in 100">-->
                            <!--<div v-for="item in 6"  class="slider_item">-->
                                 <!--<div class="item_top">-->
                                   <!--<img style="height: 100%;width: 100%;object-fit: cover" src="../../assets/images/datacenter/nvshen.png" alt="">-->
                                 <!--</div>-->
                                 <!--<div class="item_bottom">-->
                                   <!--王群-->
                                 <!--</div>-->
                             <!--</div>-->
                          <!--</span>-->
                     <!--</vue-seamless-scroll>-->


                     <vue-seamless-scroll :data="newsList" :class-option="optionRight" class="seamless-warp2">
                         <span v-for="item1 in 50">
                            <div v-for="item in newsList"  class="slider_item">
                                 <div class="item_top">
                                   <!--<img style="height: 100%;width: 100%;object-fit: cover" src="../../assets/images/datacenter/nvshen.png" alt="">-->
                                   <img style="height: 100%;width: 100%;object-fit: cover" :src="item.pic?item.pic:'/static/header.png'" alt="">
                                 </div>
                                 <div class="item_bottom">
                                   {{item.name}}
                                 </div>
                             </div>
                          </span>
                     </vue-seamless-scroll>

                   </div>

              </div>
            </div>
            <!--网格员-->


          </div>
             <!--右部-->



        </div>



        <!--身体部分-->


      </div>



      </dv-full-screen-container>
      <!--引入大屏响应式容器-->




       <!--背景粒子动画-->
      <div class="bg_play">
          <vue-particles
            color="#fff"
            :particleOpacity="0.7"
            :particlesNumber="80"
            shapeType="circle"
            :particleSize="4"
            linesColor="#fff"
            :linesWidth="1"
            :lineLinked="true"
            :lineOpacity="0.4"
            :linesDistance="150"
            :moveSpeed="2"
            :hoverEffect="true"
            hoverMode="grab"
            :clickEffect="true"
            clickMode="push"
            class="lizi"
          >
          </vue-particles>
      </div>
      <!--背景粒子动画-->






    </div>
</template>

<script>

    import vueSeamlessScroll from 'vue-seamless-scroll'//引入自动轮播插件
    import EventType from './eventtype/EventType'
    import Volunteer from './volunteer/Volunteer'
    import GirdMap from './girdmap/GirdMap'
    export default {
        name: "DataCenter",
        data(){
          return{
            cunminMessage:{},//村民信息数据
            sexs:{},//男女比例饿
            eventDetail:{},//事件情况数据
            keyGroups:[],//重点人群的数据
            Healthys:{},//获取健康状态
            GirdManager:[1,2,3,4,5,6],//网格长
            Girder:[],//网格员


            selectTime:'',//下拉选择的时间
            keyTime:'',//重点人群下拉选择的时间
            warn:0,//事件预警的下拉选择
            key:1,//重点人群的下拉选择



            newsList: [1,2,3,4,5,6],//无缝滚动测试数据
            options: [],
            value: '',//下拉选择框的测试数据

            options1: [],
            value1: '',//下拉选择框的测试数据

            loading:true,
            year:'',
            month:'',
            date:'',
            week:'',
            hh:'',
            mm:'',
            ss:'',
            config:{},//轮播插件配置,红榜列表数据默认显示前10名
            configtype:{},//事件类型配置,即事件类型的数据


          }
        },

        components:{
          vueSeamlessScroll,
          EventType,
          Volunteer,
          GirdMap
        },
        created(){
          this.getYearMonth();
          this.getGriderList();
        },
        mounted(){
          this.CancelLoading();
          this.currentTime();
          this.getCunminMessage();
          this.getSexMessage();
          this.getRedList();
          this.getEventDetail();
          this.getEventType();
          this.getKeyGroups();
          this.getHealthys();
        },
        methods:{
          Exit(){
            console.log('点击了退出按钮！');
            this.$router.go(-1);
          },//点击了退出按钮
          CancelLoading(){
            setTimeout(() => {
              this.loading = false;
            }, 1000);
          },//取消加载
          getDate () {
            this.year = new Date().getFullYear()+'';
            this.month = (new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : (new Date().getMonth() + 1))+'';
            this.date = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()+'';
            this.hh = (new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours())+'';
            this.mm = (new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes())+'';
            this.ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()+'';
            let week = new Date().getDay()
            if (week === 1) {
              this.week = '星期一'
            } else if (week === 2) {
              this.week = '星期二'
            } else if (week === 3) {
              this.week = '星期三'
            } else if (week === 4) {
              this.week = '星期四'
            } else if (week === 5) {
              this.week = '星期五'
            } else if (week === 6) {
              this.week = '星期六'
            } else if (week === 27) {
              this.week = '星期日'
            }
          },//获取当前系统时间
          currentTime () {
            setInterval(() => {
              setTimeout(this.getDate, 0)
            }, 1000);
            // setInterval(this.getDate, 1000);
          },//定时请求事件
          choicYear(y,type) {
            // console.log('当前年月日：',this.options[y].label,'--type:',type);
            if (type==0){
              console.log('事件预警');
              this.selectTime=this.options[y].label;
            } else {
              console.log('重点人群');
              this.keyTime=this.options[y].label1;
            }

          },//选择月份
          getYearMonth(){
            this.options=this.$util.selectYearMonth();
            this.options1=this.$util.selectYear2(10);
          },
          getCunminMessage(){
             let that = this;
             that.$http.get("/api/DataCenterApi/getMemberTotal?vollege_id="+that.$util.vollege_id,null,r=>{
               // console.log('村民信息为：',r);
               that.cunminMessage=r.data;
             });
          },//获取村民信息
          getSexMessage(){
            let that = this;
            that.$http.get("/api/DataCenterApi/getMemberSex?vollege_id="+that.$util.vollege_id,null,r=>{
              that.sexs=r.data;
            });
          },//获取男女比列
          getRedList(){
            let that = this;
            that.$http.get("/api/DataCenterApi/getRedLitsMember?vollege_id="+that.$util.vollege_id+"&limit=10000",null,r=>{
              // console.log('红榜列表：',r.data.slice(0,10));
              // that.redList=r.data.slice(0,10);
              let config={
                data: [
                  // ['王小明于2020-11-10去图书馆学习一个小时获得 <span style="color: #23c222">50积分</span>'],
                ],//轮播数据
                  oddRowBGC:'#0b1547',//奇数行背景色
                  evenRowBGC:'transparent',//偶数行背景色
                  waitTime:1500,//轮播等待毫秒数
              };//轮播插件配置
              r.data.slice(0,10).forEach(function (v) {
                 // console.log('前10的红榜数据为：v.desc',v.desc,'**获得积分：'+v.provider);
                 config.data.push([v.desc+"获得"+"<span style=\"color: #23c222\">"+v.provider+"积分"+"</span>"]);
              });
              // console.log('红榜数据config为:',config);
              that.config=config;
            });



          },//获取红榜列表
          getEventDetail(){
             let that = this;
             that.$http.get("/api/DataCenterApi/getEventCount?vollege_id="+that.$util.vollege_id,null,r=>{
                that.eventDetail=r.data;
             });

          },//获取事件情况
          getEventType(){
              let that = this;
              that.$http.get("/api/DataCenterApi/getEeventCatCount?vollege_id="+that.$util.vollege_id,null,r=>{
                   // console.log('获取的事件类型为：',r.data);
               // let configtype={
               //    data: [
               //      {
               //        name: '矛盾纠纷',
               //        value: 55
               //      },
               //      {
               //        name: '网上信访',
               //        value: 100
               //      },
               //      {
               //        name: '灾情险情',
               //        value: 200
               //      },
               //      {
               //        name: '电话诉求',
               //        value: 66
               //      },
               //      {
               //        name: '矛盾纠纷',
               //        value: 55
               //      },
               //      {
               //        name: '电话诉求',
               //        value: 66
               //      },
               //    ],
               //      unit: '起',
               //  };//事件类型配置
               //
                   let configtype={
                     data:[],
                     unit:'起',
                   };
                   r.data.forEach(function (v) {
                      configtype.data.push({name:v.uc_name,value:v.num});
                   });
                 // console.log('获取的事件类型为configtype：',configtype);
                 that.configtype=configtype;

              });

          },//获取事件类别
          getKeyGroups(){
              let that = this;
              that.$http.get("/api/DataCenterApi/importantMemberCount?vollege_id="+that.$util.vollege_id,null,r=>{
                  // console.log('重点人群的数据为：',r.data);
                  that.keyGroups=r.data.slice(0,5);//默认截取前五条数据
              });
          },//获取重点人群
          getHealthys(){
            let that = this;
            that.$http.get("/api/DataCenterApi/getHealthyMember?vollege_id="+that.$util.vollege_id,null,r=>{
                // console.log('获取的健康数据为：',r.data);
                that.Healthys=r.data;
            });

          },//获取健康状态
          getGriderList(){
            let that = this;
            that.$http.get("/api/DataCenterApi/getGriderList?vollege_id="+that.$util.vollege_id,null,r=>{
                // console.log('网格人员：',r.data);
                r.data.forEach(function (v) {
                     if (v.roles=='网格长') {
                         that.GirdManager=v.griderList;
                     }else if(v.roles=='网格员'){
                         that.newsList=v.griderList;
                         that.Girder=v.griderList;
                     }
                });
              // console.log('网格员：',that.Girder);

            });
          },//获取网格人员的数据




        },

          computed: {
            optionRight () {
              return {
                direction: 2,
                limitMoveNum:4,
              }
            }
          },




    }
</script>

<style scoped>
   @import "../../assets/images/alitubiao/iconfont.css";
  .data_center{
    height: 1080px;
    width: 1920px;
    background-image: url("../../assets/images/datacenter/datacenter.png");
    background-size: cover;
    background-repeat: no-repeat;

  }
  .bg_play{
    width: 1920px;
    height: 1080px;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 99;
  }
  .box_container{
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  .header{
    height: 87px;
    width: 1920px;
    background-image: url("../../assets/images/datacenter/header.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
  }
  .exit{
    flex: 1;
    box-sizing: border-box;
  }
  .exit_box{
    padding-left: 40px;
    padding-top: 15px;
    display: block;
  }
  .exit_text{
    color: #26d1d4;
    font-size: 16px;
  }
  .title{
    flex: 1;
    font-size: 36px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    text-align: center;
    line-height: 87px;
  }
  .time{
    flex: 1;
    text-align: right;
  }
  .time_box{
    display: block;
    font-size: 14px;
    color: white;
    padding-top: 18px;
    padding-right: 15px;
  }



  .body{
    flex: 1;
    box-sizing: border-box;
    padding-top: 20px;
    padding-bottom: 20px;
    display: flex;
  }
  .left{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .left_one{
    height: 121px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    padding-left: 28px;
    padding-right: 14px;
  }
  .left_one_left{
    box-sizing: border-box;
    padding: 20px;
    width: 267px;
    height: 121px;
    background-image: url("../../assets/images/datacenter/nannv.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
  }
  .left_one_left_top{
    flex: 1;
  }
  .left_one_left_top_dot{

  }
  .left_one_left_top_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }
  .left_one_left_bottom{
    flex: 1;
    display: flex;
  }

  .left_one_left_bottom_left{
    flex: 1.2;
    display: flex;
  }

  .man{
    height: 40px;
    width: 40px;
  }
  .man_data{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .man_sex{
    font-size: 14px;
    color: #0eb4d2;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }
  .man_num{
    font-size: 15px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }




  .left_one_left_bottom_right{
    flex: 1;
    display: flex;
  }
  .poor{
    height: 40px;
    width: 40px;
  }
  .poor_data{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .poor_status{
    font-size: 14px;
    color: #f93f00;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }
  .poor_num{
    font-size: 15px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }



   .left_one_right_top{
    flex: 1;
   }
  .left_one_right_top_dot{

  }
  .left_one_right_top_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }



  .left_one_right_bottom{
    flex: 1;
    display: flex;
  }
  .left_one_right_bottom_left{
    flex: 1.2;
    display: flex;
  }
  .healthy{
    height: 40px;
    width: 40px;
  }
  .healthy_data{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .healthy_status{
    font-size: 14px;
    color: #2fe494;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }
  .healthy_num{
    font-size: 15px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }


  .left_one_right_bottom_right{
    flex: 1;
    display: flex;
  }















   .women{
     height: 40px;
     width: 40px;
   }
   .women_data{
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
   }
   .women_sex{
     font-size: 14px;
     color: #f71f4c;
     font-family: "Adobe 黑体 Std R";
     padding-left: 10px;
   }
   .women_num{
     font-size: 15px;
     color: white;
     font-family: "Adobe 黑体 Std R";
     padding-left: 10px;
   }












  .left_one_right{
    box-sizing: border-box;
    padding: 20px;
    width: 267px;
    height: 121px;
    background-image: url("../../assets/images/datacenter/nannv.png");
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
  }

  .left_two{
    height: 123px;
    display: flex;
    justify-content: center;
    padding-left: 12px;
  }
  .event_desc{
    height: 123px;
    width: 553px;
    background-image: url("../../assets/images/datacenter/shijianqingkuan.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .event_desc_top{
    flex: 1;
  }
  .event_desc_top_dot{

  }
  .event_desc_top_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }
  .event_desc_bottom{
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
  .status_text{
    font-size: 13px;
    font-family: "Adobe 黑体 Std R";
  }
  .status_num{
    font-size: 24px;
    font-family: "Adobe 黑体 Std R";
  }

  .yes{
    height: 44px;
    width: 157px;
    border: 1px solid #f7ab13;
    background: rgba(247,171,19,0.2);
    color: #f7ab13;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .no{
    height: 44px;
    width: 157px;
    border: 1px solid #ff4c53;
    background: rgba(255,76,83,0.2);
    color: #f7ab13;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }
  .dai{
    height: 44px;
    width: 157px;
    border: 1px solid #2fe494;
    background: rgba(47,228,148,0.2);
    color: #2fe494;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }





  .left_three{
    height: 398px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-left: 12px;
  }
  .event_type{
    width: 553px;
    height: 398px;
    background-image: url("../../assets/images/datacenter/type.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .event_type_top{
    height: 43px;
    display: flex;
  }
  .event_type_top_left{
    flex: 4;
  }
  .event_type_top_right{
    flex: 1;
  }
   .event_type_top_dot{
     height: 12px;
     width: 12px;
   }
  .event_type_top_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }

  #warnmap{
    flex: 1;
    /*background: red;*/
  }

  .left_four{
    height: 262px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-left: 12px;
  }
  .type_total{
    width: 553px;
    height: 262px;
    background-image: url("../../assets/images/datacenter/type2.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .type_total_top{
    height: 43px;
  }
  .type_total_top_dot{
    height: 12px;
    width: 12px;
  }
  .type_total_top_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }


  .type_total_bottom{
    flex: 1;
    /*background: red;*/
  }


  .center{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .center_one{
    height: 142px;

  }
  .cunmin{
    width: 735px;
    height: 142px;
    background-image: url("../../assets/images/datacenter/cunmin.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .cunmin_top{
    flex: 1;
    text-align: left;
  }
  .cunmin_dot{
    height: 12px;
    width: 12px;
  }

  .cunmin_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }
  .cunmin_bottom{
    flex: 1;
    display: flex;
    justify-content: space-between;
  }
  .cunmin_message{
    width: 219px;
    height: 59px;
    background-image: url("../../assets/images/datacenter/cunmin_kuang.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 10px;
    display: flex;
    align-items: center;
  }
  .home{
    height: 40px;
    width: 40px;
  }
  .total_text{
    font-size: 14px;
    font-family: "Adobe 黑体 Std R";
    color: #01c4f7;
    padding-left: 10px;
  }
  .total_num{
    font-size: 19px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }







  .center_two{
    height: 453px;

  }
  #map{
    height: 453px;
    width: 735px;
    border-radius: 8px;
    overflow: hidden;
  }


  .center_three{
    height: 323px;
  }
  .zhiyuan{
    width: 735px;
    height: 323px;
    background-image: url("../../assets/images/datacenter/zhiyuan.png");
    background-size: cover;
     repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .zhiyuan_top{
    height: 43px;
    display: flex;
  }
  .zhiyuan_top_left{
    flex: 4;
    text-align:left;
  }
  .zhiyuan_top_left_dot{
    height: 12px;
    width: 12px;
  }
  .zhiyuan_top_left_text{
    font-size: 14px;
    font-family: "Adobe 黑体 Std R";
    color: #01c4f7;
    padding-left: 10px;
  }
  .zhiyuan_top_right{
    flex: 1;

  }
  .zhiyuan_bottom{
    flex: 1;

  }




  .right{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .right_one{
    height: 228px;
    box-sizing: border-box;
    padding-left: 15px;
  }






  .red{
    width: 553px;
    height: 228px;
    background-image: url("../../assets/images/datacenter/red.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .red_top{
    height: 43px;
    text-align: left;
  }
  .red_dot{
    height: 12px;
    width: 12px;
  }
  .red_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }

  .red_bottom{
    flex: 1;
  }






  .right_two{
    height: 224px;
    box-sizing: border-box;
    padding-left: 15px;
  }
  .key{
    background-image: url("../../assets/images/datacenter/key.png");
    background-size: cover;
    background-repeat: no-repeat;
    width: 553px;
    height: 224px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .key_top{
    height: 43px;
    display: flex;
  }
  .key_top_left{
    flex: 4;
  }
  .key_dot{
    height: 12px;
    width: 12px;
  }
  .key_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }

  .key_top_right{
    flex: 1;
  }


  .key_bottom{
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .key_groups{
    height: 55px;
    width: 144px;
    margin-right: 40px;
    display: flex;
  }

  .key_groups:nth-child(3){
    margin-right: 0px;
  }
   .key_groups_left{
     width: 55px;
   }
   .key_groups_right{
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
   }
   .key_groups_right_top{
     font-size: 19px;
     color: #999999;
     font-family: "Adobe 黑体 Std R";
   }
   .key_groups_right_bottom{
     font-size: 21px;
     color: white;
     font-family: "Adobe 黑体 Std R";
   }


  .right_three{
    height: 223px;
    box-sizing: border-box;
    padding-left: 15px;
  }
  .grider_higner{
    width: 553px;
    height: 223px;
    background-image: url("../../assets/images/datacenter/wanggezhang.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .grider_higner_top{
    height: 43px;
  }
  .grider_higner_top_dot{
    height: 12px;
    width: 12px;
  }
  .grider_higner_top_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }

  .grider_higner_bottom{
    flex: 1;
  }


  .right_four{
    height: 223px;
    box-sizing: border-box;
    padding-left: 15px;
  }
  .grider_lower{
    width: 553px;
    height: 223px;
    background-image: url("../../assets/images/datacenter/wanggeyuan.png");
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }
  .grider_lower_top{
    height: 43px;
  }
  .grider_lower_top_dot{
    height: 12px;
    width: 12px;
  }
  .grider_lower_top_text{
    font-size: 20px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    padding-left: 10px;
  }




  .grider_lower_bottom{
    flex: 1;
  }

  .el-carousel{
    width: 100%;
    height: 100%;

  }

   .el-carousel-item{
     margin-left: 80px;
     width: 80px;
     height: 100%;
     display: flex;
     flex-direction: column;
   }
  .slider_img{
    height: 110px;
    width: 80px;
  }
  .slider_name{
    flex: 1;
    font-size: 16px;
    line-height: 30px;
    color: white;
    font-family: "Adobe 黑体 Std R";
    text-align: center;
  }

  .el-select{
    color: white;
    background: transparent;
    height: 24px;
    width: 100px;
  }
   .data_center  >>> input{
    height: 24px;
    width: 100px;
    background: transparent;
  }
   .data_center  >>> .el-input__suffix{
     margin-top: 7px;
     display: none;
   }
   .data_center >>> .el-scrollbar{
     background: #060f30;
   }
   .data_center >>> .el-select-dropdown__item.selected{
    background: transparent;
  }


   .seamless-warp2{
     height: 155px;
     width: 100%;
     overflow: hidden;
     margin-top: 23px;
   }
   .item_box{

   }

   .slider_item{
     height: 155px;
     width: 80px;
     margin-right: 20px;
     float: left;
     display: flex;
     flex-direction: column;
   }
   .item_top{
     height: 108px;
   }
  .item_bottom{
      flex: 1;
      font-size: 16px;
      line-height: 30px;
      color: white;
      font-family: "Adobe 黑体 Std R";
      text-align: center;
      line-height: 47px;
  }








</style>
